<template>
	<div>
		<el-tabs v-model="activeTab" @tab-click="handleTabClick" type="border-card" style="height:calc(100vh - 280px)">
			<el-tab-pane label="委外入库" name="storage">
				<el-table :data="storageRecords" height="calc(100vh - 320px)" row-key="id" :stripe="false"
									@expand-change="handleExpandChange"
									header-cell-class-name="witheTableHeader">
					<el-table-column type="expand">
						<template #default="scope">
							<div m="4">
								<el-table ref="tableCil" :stripe="false" border size="small" :data="scope.row.children"
													style="width: 95%;margin-left: 20px" header-cell-class-name="blueTableHeader">
									<el-table-column type="index" width="80" align="center" label="" />
									<el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column type label="需求数量" prop="materialCount" min-width="100" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="实际入库数量" prop="actualOutCount" min-width="150" align="center"
																	 show-overflow-tooltip />
									<el-table-column label="批次号" prop="batchNo" min-width="180" align="center"
																	 show-overflow-tooltip />
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" align="center" type="index" width="70" />
					<el-table-column label="任务单号" prop="code" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column label="委外单号" prop="outsourcingNo" min-width="150" show-overflow-tooltip
													 align="center" />
					<el-table-column label="入库库位" prop="targetStorageName" min-width="150" show-overflow-tooltip
													 align="center" />
					<el-table-column label="创建时间" prop="createTime" min-width="150" show-overflow-tooltip align="center" />
					<el-table-column prop="allotStatus" align="center" min-width="80" label="单据状态"
													 :formatter="formatInStatus" />
					<el-table-column prop="remark" align="center" min-width="80" label="退库备注" />
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="委外计划" name="dispatch">
				<el-table class="pageTableClass" :data="dispatchRecords" header-cell-class-name="witheTableHeader"
									height="calc(100vh - 320px)">
					<el-table-column type="expand">
						<template #default="props">
							<div m="4">
								<el-table ref="tableCil" border size="small" :data="props.row.children"
													header-cell-class-name="blueTableHeader" style="width: 100%;margin-left: 20px">
									<el-table-column label="序号" type="index" width="50" align="center" />
									<el-table-column prop="materialName" label="物料名称" width="250" align="center" />
									<el-table-column prop="materialNo" label="物料编号" width="250" align="center" />
									<el-table-column prop="traceabilityCodePlace" width="100" label="模具号" align="center" />
									<el-table-column prop="traceabilityCode" label="追溯码" width="250" align="center" />
									<el-table-column prop="planCount" label="计划数量" width="150" align="center" />
									<el-table-column prop="outCount" width="250" label="出库数量" align="center" />
									<el-table-column prop="intCount" width="250" label="加工领料数量" align="center" />
									<el-table-column prop="description" width="200" label="备注" align="center" />
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" align="center" width="70" type="index">
					</el-table-column>
					<el-table-column prop="outsourcingNo" label="委外单号" align="center" min-width="200" />
					<el-table-column prop="procedureOrderNo" label="工序订单号" align="center" min-width="200" />
					<el-table-column label="委外数量" align="center" prop="outsourcingCount" min-width="200" />
					<el-table-column prop="demandTime" label="需求日期" min-width="150" align="center">
						<template #default="scope"> {{ scope.row.demandTime.slice(0, 10) }}</template>
					</el-table-column>
					<el-table-column prop="supplierName" label="供应商" align="center" min-width="250" />
					<el-table-column prop="putWarehouseName" width="250" label="产品入库仓库" align="center" />
					<!--				<el-table-column prop="supplierWarehoseName" width="250" label="供应商材料库" align="center" />-->
					<el-table-column prop="warehouseName" label="发货仓库" width="250" align="center" />
					<el-table-column prop="planCount" width="250" label="计划数量" align="center" />
					<el-table-column prop="status" label="单据状态" align="center" min-width="200" :formatter="formatInStatus" />
					<!--				<el-table-column label="操作" align="center" fixed="right" width="200">-->
					<!--					<template #default="scope">-->
					<!--						<el-button @click="handleEdit(scope.row)" type="text" size="small" plain :icon="Edit">编辑</el-button>-->
					<!--						<el-button @click="handleDel(scope.row)" text type="danger" size="small" :icon="Delete">删除</el-button>-->
					<!--					</template>-->
					<!--				</el-table-column>-->
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="质检记录" name="inventory">
				<el-table class="pageTableClass" :data="inventoryDetails" border height="calc(100vh - 320px)"
									header-cell-class-name="witheTableHeader">
					<el-table-column label="序号" align="center" width="70" type="index" />
					<el-table-column prop="no" label="单号" align="center" min-width="200" />
					<el-table-column prop="sourceNo" label="来源单号" align="center" min-width="200" />
					<el-table-column prop="qualityType" label="质检类型" align="center" min-width="200">
						<template #default="scope">
							<span> {{ getQualityTypeByValue(scope.row.qualityType) }} </span></template>
					</el-table-column>
					<el-table-column prop="passRate" label="合格率" align="center" min-width="100">
						<template #default="scope">
							<div v-if="scope.row.passRate"> {{ scope.row.passRate }} %</div>
						</template>
					</el-table-column>
					<el-table-column prop="totalQuantity" label="质检数量" align="center" min-width="110" />
					<el-table-column prop="schemeTaskForm.qualifiedQuantity" label="合格数" align="center" min-width="100" />
					<el-table-column prop="schemeTaskForm.unQualifiedQuantity" label="不合格数" align="center"
													 min-width="100" />
					<el-table-column prop="createTime" label="创建时间" align="center" min-width="200" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElTabPane, ElTabs } from 'element-plus';
import axiosInstance from '@/utils/http/api';

// 响应式变量，用于控制当前激活的标签页
const activeTab = ref('storage');

// 各个标签页的数据
const storageRecords = ref([
	// 入库记录数据
]);

const dispatchRecords = ref([
	// 出库记录数据
]);

const inventoryDetails = ref([
	// 库存明细数据
]);

const formatInStatus = (row, column, cellValue) => {
	switch (cellValue) {
		case 1:
			return '待处理';
		case 2:
			return '进行中';
		case 3:
			return '完结';
	}
};


const qualityRecords = ref([
	// 质检记录数据
]);

const handleExpandChange = (row: any, expandedRows: any[]) => {
	if (expandedRows.includes(row)) {
		rowChildren(row);
	} else {
		// getList();
	}
};

const rowChildren = (row: any) => {
	axiosInstance.post('/api/warehouseMaterialTransferOrder/getDetailById', { id: row.id }).then(res => {
		if (res.code !== 200) {
			ElMessage.warning(res.message);
			return false;
		}
		storageRecords.value = storageRecords.value.map((item) => {
			if (item.id === row.id) {
				return { ...item, children: res.data.warehouseMaterialTransferOrderDetailBatchList };
			}
			return item;
		});
	});
};

// 各个标签页的数据
const props = defineProps({
	preorderTraceCodeList: Array
});

watch(
	() => props.preorderTraceCodeList,
	(newValue, oldValue) => {
		console.log(oldValue);
		if (newValue !== oldValue) {
			// 当 preorderTraceCodeList 发生变化时，执行 getList 请求
			getList();
		}
	}
);


onMounted(() => {
	getList();
});


const getList = () => {
	// 委外入库
	axiosInstance.post('/api/traceCode/outsourcing/stockIn/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			storageRecords.value = res.data;
		});
	// 委外计划
	axiosInstance.post('/api/traceCode/outsourcing/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			const list = res.data;
			for (const item of list) {
				item.children = item.outsourcingWorkMaterialVOS;
			}
			dispatchRecords.value = list;
		});

	//质检记录
	axiosInstance.post('/api/traceCode/outsourcing/qualitySchemeTask/findByTraceCode', {
		preorderTraceCodeList: props.preorderTraceCodeList
	})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			inventoryDetails.value = res.data;
		});
};
// 处理标签页点击事件
const handleTabClick = (tab) => {
	// 这里可以执行一些逻辑，比如更新数据等
	console.log('当前激活的标签页:', tab.props.name);
};


const getQualityTypeByValue = (e) => {
	let name = null;
	for (const item of qualityTypeList.value) {
		if (e == item.value) {
			name = item.label;
		}
	}
	return name;
};

const qualityTypeList = ref([
	{
		label: '首件检',
		value: '1',
		type: 'material'
	},
	{
		label: '末件检',
		value: '2',
		type: 'material'
	},
	{
		label: '生产',
		value: '3',
		type: 'material'
	},
	{
		label: '巡检',
		value: '4',
		type: 'material'
	},
	{
		label: '入库检',
		value: '5',
		type: 'procedure'
	},
	{
		label: '出库检',
		value: '6',
		type: 'procedure'
	},
	{
		label: '来料检',
		value: '7',
		type: 'procedure'
	}
	// 继续添加更多检查类型...
]);

</script>

<style scoped>
/* 组件的样式 */
</style>
